<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-18 18:57:15
 * @LastEditors: badcandy 568197314@qq.com
 * @LastEditTime: 2023-02-21 22:07:18
 * @FilePath: /dcollege/src/views/message/message.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <var-style-provider :style-vars="styleVars">
    <var-app-bar
      title="消息"
      style="font-size: 1.5rem"
      text-color="#000"
      color="#ffffff"
      :elevation="false"
    >
      <template #right>
        <var-menu placement="bottom-start" :offset-y="12">
          <var-button color="blue" round text>
            <var-icon color="#fff" name="plus" size="1rem" />
          </var-button>

          <template #menu>
            <var-cell v-ripple>添加朋友</var-cell>
            <var-cell v-ripple>发起群聊</var-cell>
          </template>
        </var-menu>
      </template>
    </var-app-bar>
    <div class="search">
      <div class="search-input">
        <var-input
          :hint="false"
          :line="false"
          placeholder="搜索"
          v-model="value"
          clearable
        >
          <template #prepend-icon>
            <var-icon name="magnify-plus-outline" />
          </template>
        </var-input>
      </div>
    </div>
    <var-result
      v-if="isShow"
      type="empty"
      title="没有消息"
      description="暂时没有新消息呢"
    ></var-result>
  </var-style-provider>
  <messageList
    v-for="i in MList"
    :key="i.friendId"
    v-bind="i"
    @click.native="toChat(i)"
  ></messageList>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter, type LocationQueryValueRaw } from "vue-router";
import { getMessageList } from "@/services/message"
const router = useRouter();
const value = ref("");
const isShow = ref(false);
const styleVars = {};
interface MessageList {
  friendId: string;
  friendName: string;
  imgUrl?: string;
  lastMessage?: string;
  lastTime?: string;
}
const MList = ref([] as MessageList[]);
const timer = ref(null as unknown as number) // 定时器常量

const toChat = (i: {}) => {
  const f = JSON.stringify(i)
  router.push({ path: "/chat", query: {friend: encodeURIComponent(f)} });
};

onMounted(() => {
  timer.value = setInterval(() => {
    setTimeout(() => { 
      getMessageList().then((res) => {
        MList.value = res.data.data as MessageList[];
      });
    },0)
  }, 2000);
})
onUnmounted(() => {
  clearInterval(timer.value);
})
</script>

<style scoped>
.search {
  position: relative;
  background: #fff;
  padding: 10px 10px 10px 10px;
}
.search-input{
  background: rgb(241,243,250);
  border-radius: 15px;
  padding-left: 0.625rem;
}
</style>
